<template>
	<div class="container">

		<!-- 头部信息 begin -->
			<div class="aui-header">
				<div class="aui-header-box clearfix">
					<div class="aui-header-logo">
						<a href="index.html">
							<img src="/static/themes/img/logo/logo-vo.png" alt="">
						</a>
					</div>
					<div class="aui-header-sou">
						<!--<a href="search.html">-->
							<!--<span><i class="aui-iconfont aui-icon-search"></i></span>-->
						<!--</a>-->
					</div>
				</div>
				<div class="swiper-container swiper1 b-line">
					<div class="swiper-wrapper">
						<!-- selected -->
						<div class="swiper-slide" :class="cateId==x.video_cid?'selected':''" @click="changeCate(x.video_cid)" v-for="x in videoCate">{{x.video_cname}}</div>
					</div>
				</div>
			</div>
		<!-- 头部信息 end -->

		<!-- 内容信息 begin -->
			<div class="swiper-container swiper2" style="padding-top:85px; padding-bottom:49px;">
				<div class="swiper-wrapper">
					<div class="swiper-slide swiper-no-swiping">

						<scroller :on-refresh="refresh" :on-infinite="infinite" ref="my_scroller">
							<section class="aui-middle-dome" v-for="(x,index) in videoList" :id="'arr'+(index+1)">
								<a href="javascritp:;" data-action-label="click-a" data-tag="news" class="aui-middle-dome-a">
									<h3 class="aui-title-h3">{{x.video_title}}</h3>
									<div class="aui-title-img">
										<!-- <img src="/static/themes/img/ad/v1.jpg" alt=""> -->
										<video class="v" :src="x.video_url" loop="true" style="width:100%;" poster="/static/themes/img/ad/v1.jpg"></video>
										<span class="aui-title-vio"></span>
									</div>
									<div class="aui-title-text clearfix">
										<span class="aui-ban">{{x.video_time | formatDate}}</span>
										<!-- <span class="aui-zan"><i></i>1389</span> -->
										<span class="aui-lun"><i></i>{{x.video_likes}}</span>
									</div>
								</a>
							</section>
						</scroller>
					</div>
				</div>
			</div>
		<!-- 内容信息 end -->
	</div>

</template>

<script>
	export default{
		name:'videos',
		components:{},	// 再加 子组件
		data(){
			// 这里的data只做变量的初始值
			return {
				abc: '',	// 变量必须加初始值
			}
		},
		// 方法
		created(){	//组件已创建 属性已绑定 DOM文档内容还未生成时所触发
			// 很早就会触发的
			this.$store.dispatch('acVideoCate')
		},
		// created:function(){

		// }
		mounted(){	// 在DOM文档渲染结束后执行的，也就是再这里去植入插件代码
			// 脚本
		},
		// 计算属性
		computed:{
			// 写函数
			videoCate:function(){
				// 函数返回结果
				return this.$store.state.video.videoCate
			},
			videoList:function(){
				// 函数返回结果
				return this.$store.state.video.videoList
			},
			cateId(){
				return this.$store.state.video.cid
			}
		},
		methods:{
			// 写事件函数
			changeCate(cid){	// 切换分类，列表的数据要更换

				this.$refs.my_scroller.finishInfinite(false);	//上拉获取数据可以重新调用

				this.$store.commit('muvideoEmpty')
				this.$store.dispatch('acPn',1);	// 页码改为：1
				this.$store.commit('mucate',cid)	// 改变分类cid
			},
			/**
		     * 下拉刷新
		     */
		    refresh(done) {
		      	// 要默认第1页
		      	// 刷新页面
		   		this.$store.dispatch('acPn',1);
		   		this.$store.commit('muvideoEmpty');
		   		done(true);  //阻止循环调用
        		return;
		    },

		    /**
		     * 上拉获取下一页的数据（会自动调用）
		     */
		    infinite(done) {
		      // 页码要加一
		      setTimeout(()=>{
				var pn = this.$store.state.video.pn;
				var cid = this.$store.state.video.cid;

				// 每次上拉加载，获取下一页的数据
				this.$store.dispatch('acVideoList',cid)

				this.$store.dispatch('acPn',++pn);	// 页码+1

				done(true);  //阻止循环调用
        		return;
		      },1000)
		    },
		},
		// 这里可以监听变量是否改变
		watch:{
			videoCate(){
				this.$nextTick(function(){
					// 这里监听到变量的值改变了，在这里执行插件
					function setCurrentSlide(ele, index) {
			            $(".swiper1 .swiper-slide").removeClass("selected");
			            ele.addClass("selected");
			        }
					var swiper1 = new Swiper('.swiper1',{
			            slidesPerView: 5.5,
			            paginationClickable: true,
			            spaceBetween: 1,
			            freeMode: true,
			            loop: false,
			            onTab: function(swiper) {
			                var n = swiper1.clickedIndex;
			            }
			        });
			        swiper1.slides.each(function(index, val) {
			            var ele = $(this);
			            ele.on("click", function() {
			                setCurrentSlide(ele, index);
			                // swiper2.slideTo(index, 500, false);
			            });
			        });
			        var swiper2 = new Swiper('.swiper2',{
			            direction: 'horizontal',
			            loop: false,
			            //					effect : 'fade',//淡入
			            //effect : 'cube',//方块
			            //effect : 'coverflow',//3D流
			            //					effect : 'flip',//3D翻转
			            autoHeight: true,
			            onSlideChangeEnd: function(swiper) {
			                //回调函数，swiper从一个slide过渡到另一个slide结束时执行。
			                var n = swiper.activeIndex;
			                setCurrentSlide($(".swiper1 .swiper-slide").eq(n), n);
			                swiper1.slideTo(n, 500, false);
			            }
			        });
				});
			},
			videoList(){
				this.$nextTick(function(){
					// 这里才写点击视频操作
					$(document).on('click','.aui-title-vio',function(){
						let $v = $(this).hide().prev();	//隐藏
						$v[0].play()	// 播放

						// 点图标，播放视频，只能播放一个
						$(this).parents('section').siblings('section').find('.v').each(function(){
							// console.log($(this).attr('src'))
							if(!this.paused){
								this.pause()	// 暂停
								$(this).next().show();
							}	// this 是兄弟标签里面的每个视频
						})
					})
					$(document).on('click','.v',function(){
						$(this).next().show();	//显示回span标签
						if(!this.paused){	// 暂停状态
							this.pause()	// 暂停
						}
					})

					// 可视区域播放视频
					var a = 1;
					$(document).scroll(function(){	// 网页滚动事件

						$('section').each(function(){
							var topnum = $(this).offset().top - $(document).scrollTop();
							var bottomnum = window.innerHeight - (topnum+$(this).height())
							if(topnum>0 && bottomnum>0){
								$(this).find('.aui-title-vio').trigger('click');
							}else{
								// $(this).find('.v').trigger('click');
							}
						});

						
					});



				})
			}
		},
		// 数据筛选，比如转换时间格式
		filters:{
			formatDate: function (value) {
				let date = new Date(value*1000);
				let y = date.getFullYear();
				let MM = date.getMonth() + 1;
				MM = MM < 10 ? ('0' + MM) : MM;
				let d = date.getDate();
				d = d < 10 ? ('0' + d) : d;
				let h = date.getHours();
				h = h < 10 ? ('0' + h) : h;
				let m = date.getMinutes();
				m = m < 10 ? ('0' + m) : m;
				let s = date.getSeconds();
				s = s < 10 ? ('0' + s) : s;
				return y + '-' + MM + '-' + d + ' ' + h + ':' + m;
			}
		}
	}

</script>

<style>
	

</style>